<template>
	<el-dialog
	  :visible.sync="logsDialog"
	  class="logsDialog"
	  >
		<h3 class="title"><span></span>{{options.title}}</h3>
		<comTable :options="datalist"></comTable>
		<div class="pageBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="pageChange"
				:current-page="options.cur"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="options.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="options.totalNum"
				background
			></el-pagination>
		</div>
	</el-dialog>

</template>

<script>
export default{
	components:{
		comTable: () => import("./comTable.vue")
	},
	props:{
		options:{
			type:Object,
			require:true
		}
	},
	data(){
		return {
			logsDialog:false,
			datalist:{}
		}
	},
	created(){
		this.datalist = this.options;
		console.log(this.options);
	},
	methods:{
		pageChange(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			console.log(p);
			this.$emit('flip');
		},
		//每页有多少条,10,20,50等,点击选择的时候调用这个方法
		handleSizeChange (val) {
			console.log(val);
			this.pageSize = val;
			this.$emit('flip');
		},
		open(){
			this.logsDialog = true;
		},
		close(){
			this.logsDialog = false;
		}
	}
}
</script>

<style scoped="scoped">
.logsDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.logsDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}
</style>
